<template>
  <div class="shareList">
    <hmNavBar title="面经分享" path="/home/find"> </hmNavBar>
    <div class="content">
      <!-- 搜索框 -->
      <van-search
        v-model="searchValue"
        show-action
        @search="search"
        @cancel="cancel"
      >
      </van-search>
      <!-- 列表 -->
      <!-- 加入一个基本的van-list v-model=false   finished=false  @load="上拉加载方法-->
      <van-list v-model="loading" :finished="finished" @load="load" v-if="!bol">
        <shareItem
          v-for="(item, index) in shareList"
          :key="index"
          :info="item"
        ></shareItem>
        <div class="noData" v-if="finished && shareList.length === 0">
          暂无数据
        </div>
      </van-list>
      <!-- 大家都在搜 -->
      <div v-else>
        <h3 class="titel">大家都在搜</h3>
        <!-- tag
                color:背景色  text-color:字体颜色
          -->
        <van-tag
          v-for="(item, index) in hotList"
          :key="index"
          class="tag"
          color="#f7f4f5"
          text-color="#545671"
          @click="search(item)"
        >
          {{ item }}
        </van-tag>

        <div class="history">
          <h3 class="titel">历史搜索</h3>
          <span class="clear" @click="clear"> 清空</span>
        </div>
        <!-- 渲染利索搜索 -->
        <van-tag
          v-for="(item, index) in historyList"
          :key="index"
          @click="search(item)"
          class="tag"
          color="#f7f4f5"
          text-color="#545671"
        >
          {{ item }}
        </van-tag>
      </div>
    </div>
  </div>
</template>

<script>
import shareItem from './shareItem'
import { articlesShare, shareTopSearch } from '@/api/find.js'
/* 引入 工具型方法用于保存与读取历史搜索 */
import { saveLocal, getLocal } from '@/utils/local.js'
export default {
  components: {
    shareItem
  },
  data () {
    return {
      hotList: [], //热搜
      historyList: JSON.parse(getLocal('history')) || [], //历史搜索
      bol: false, //false显示列表,true显示大家都在搜
      searchValue: '',
      shareList: [],
      currentPage: 0, //页码
      pageSize: 1, //页容量
      loading: false, //true正在加载,上拉时,它会自动变true,false:此次加载完成
      finished: false //表示 是否加载完成, false还没完成  true:所有数据已加载完
    }
  },
  methods: {
    /* 上拉加载load处理 1.将分页转换成start
      2.调用load时,分页++
      3.将获取到的数据进行累加
      4.数据加载完成需要将loading变为false
      5.如果总数据长度超过或等于接口的返回值total
      this.finished=true 表示加载完成    
      
      */
    async load () {
      //分页+1
      this.currentPage++
      let _q = {
        start: (this.currentPage - 1) * this.pageSize,
        limit: this.pageSize,
        q: this.searchValue
      }
      const res = await articlesShare(_q)
      /* 数据因该是累加 */
      window.console.log('列表数据', res)
      /* 数组内的title进行字符转换同,转换时,加上style */
      res.data.data.list.forEach(item => {
        if (this.searchValue != '') {
          let _arr = item.title.split(this.searchValue)
          item.title = _arr.join(
            "<span style='color:red'>" + this.searchValue + '</span>'
          )
        }
      })

      this.shareList.push(...res.data.data.list)
      /* 数据加载完成要改loading为false */
      this.loading = false
      /* 如果数据加载完成 finished=true */
      /* 如果总数据长度超过或等于接口返回值total
            this.finished=true 表示加载完成
         */
      if (this.shareList.length >= res.data.data.total) {
        this.finished = true
      }
    },
    /* 搜索框 */
    search (value) {
      /* 搜索时显示列表 */
      this.bol = false
      /* 让输入框的值=当前搜索的值,因为接口调用时,
      使用的变量就是输入框的值searchValue */
      this.searchValue = value
      /* trim是去除空格 */
      if (this.value.trim() !== '') {
        /* 在搜索中进行相应保存 ,.push保存到后面,unshift保存到前面 */
        this.historyList.unshift(value)
      }

      /* 数组去重 */
      this.historyList = [...new Set(this.historyList)]
      /* 只显示前6个  splice(起始值,个数) [1,2,3].splice(1)  */
      /* 删除3以后的 */
      this.historyList.splice(3)

      /* 保存历史搜索,将数据转换成字符串 */
      saveLocal(JSON.stringify(this.historyList), 'history')
      window.console.log(value)
      /* 先还原van-list用到的所有数据 */
      this.currentPage = 0
      this.finished = false
      this.shareList = []
      /* 2.让load方法执行 */
      /* 重新激活van-list */
      this.loading = true
      this.$nextTick(() => {
        this.loading = false
      })
    },
    cancel (value) {
      /* 取消时,显示大家都在搜 */
      this.bol = true
      window.console.log('cancel', value)
    },
    /* 清空 */
    clear () {
      this.historyList = []
      removeLocal('history')
    }
  },
  async created () {
    // /* 调用api获取数据并保存 */
    // const res = await articlesShare()
    // this.shareList = res.data.data.list
    // window.console.log('数据', res)

    /* 接口调用与保存值 */
    const res = await shareTopSearch()
    this.hotList = res.data.data
    window.console.log('hot:', res)
  }
}
</script>

<style lang="less" scoped>
.shareList {
  .content {
    padding: 8px @p15;
  }
  .history {
    display: flex;
    justify-content: space-between;
  }
  .titel {
    margin-top: 20px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 600;
    text-align: left;
    color: #222222;
    line-height: 25px;
    letter-spacing: 0px;
  }
  .clear {
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #545671;
    line-height: 16px;
    letter-spacing: 0px;
  }
  .tag {
    margin-right: 15px;
    border-radius: 8px;
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #545671;
    line-height: 16px;
    letter-spacing: 0px;
  }
}
</style>
